<template>
	<view v-if="advertisementShow">
		<view class="advertisement">
				<!-- #ifdef H5 || MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO -->
				<swiper class="swiper" :autoplay="true" :indicator-dots="true" :indicator-active-color="'#FFFFFF'" :interval="3000" v-if="detailInfo.type == 1||detailInfo.type == 2">
					<!-- 图片 轮播图 -->
					<swiper-item v-for="(item, index) in detailInfo.piclist" :key="index" >
						<view class="close-button">
							<view class="close-but-all">{{endTime}}后关闭</view>
							<view class="close-icon-all">
								<text class="iconfont" @click="close()">&#xe688;</text>
							</view>
						</view>
						<image class="img" @click="gotoSkip(item.jump_url)" :src="item.img_url" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<!-- #endif  -->
				<!-- #ifdef APP-PLUS -->
				<swiper class="swiper" v-if="detailInfo.type == 1||detailInfo.type == 2" :disable-touch="stopTouchMove"
					:autoplay="autoPlay" :indicator-dots="true" :indicator-active-color="'#FFFFFF'"  :interval="3000">
					<swiper-item v-for="(item, index) in detailInfo.piclist" :key="index">
						<view class="close-button">
							<view class="close-but-all">{{endTime}}后关闭</view>
							<view class="close-icon-all">
								<text class="iconfont" @click="close()">&#xe688;</text>
							</view>
						</view>
						<image class="img" :src="item.jump_url"
							style="z-index:99;position: fixed;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
						</image>
					</swiper-item>
				</swiper>
				<!-- #endif  -->
			<!-- 优惠卷 -->
			<block ref="popup" v-if="detailInfo.type == 3">
				<view class="marketing-content" :style="{ backgroundImage: 'url(' + detailInfo.coupon_img + ')' }">
					<view class="close-button">
						<view class="close-but-all">{{endTime}}后关闭</view>
						<view class="close-icon-all">
							<text class="iconfont" @click="close()">&#xe688;</text>
						</view>
					</view>	
					<view class="marketing-list">
						<block v-for="(item,index) in detailInfo.coupon_list" :key="index">
							<view class="roll-up-content">
								<view class="roll-up-left">
									<view class="money">¥<text class="number">{{item.amount}}</text> </view>
									<block v-if="item.samount">
										<view class="use-type" v-if="item.samount == 0">无金额限制</view>
										<view class="use-type" v-else>满{{item.name}}可用</view>
									</block>
								</view>
								<view class="roll-up-right">
									<view class="roll-up-title">{{item.name}}</view>
									<view class="ageing">{{item.validity_period}}</view>
								</view>
							</view>
						</block>
					</view>
					<view class="marketin-bottom">
						<view class="button-receive" @click="receiveMarketing()"><text class="text">一键领取</text></view>
					</view>
				</view>
			</block>
			<!-- 视频 -->
			<view class="swiper-video" v-else-if="detailInfo.type == 4">
				<video class="video" :src="detailInfo.video" :autoplay="viautoPlay" :controls="false"
					:enable-play-gesture="true"  @ended="endPlay()" @play="onplay()">
				</video>
				<view class="button" @click="skipNow()">立即跳过({{endTime}})</view>
			</view>
		</view>
	</view>

</template>

<script>
	/**
	 * 开屏广告
	 * advertisementShow 控制组件是否显示 默认 false
	 * viautoPlay 视频是否播放 默认true
	 * getRoute 当前页面路径
	 */
	import { toPath } from '@/utils/toPath.js';
	import { adsPath } from '@/utils/ads.js'
	import { getRoute } from '@/utils/utils.js';
	export default {
		name: "st-screen-advertising",
		props: {},
		created() {
			this.getRoute = getRoute()
			this.isLogin()
			this.getDates()
			this.getScreen()
		},
		data() {
			return {
				advertisementShow: false,//是否显示
				videoShow: false,// 跳过视频播放 
				detailInfo: '',//数据
				hasLogin: false,//是否登录
				typeList:[],
				endTime:0,//延时关闭营销广告时间
				viautoPlay: true,//视频是否播放
				getRoute:''
			};
		},

		methods: {
		    //获取缓存判断当天该页面是否有数据
			getSync(){
				let screen = []
					screen = uni.getStorageSync('advertising')
					if(!screen){
						this.addSync()
					}else{
						this.typeList = JSON.parse(screen)
						let result = ''
						result = this.typeList.find(obj => obj.path === this.getRoute);
						if(result&&result.path == this.getRoute){
							if(result.date != this.date){
								this.typeList .map((item,index) =>{
									if(item.path === this.getRoute){
										item.date = this.date
										this.getScreen()
									}
								})
							}
						}else{
							this.addSync()
						}
					}
			},
			//判断是否登录
			isLogin(){
				this.hasLogin = this.$store.state.hasLogin;
			},
			//添加新的缓存
			addSync(){
				let list={
					path:'',
					date:'',
				}
				list.path = this.getRoute
				list.date = this.date
				this.typeList.push(list)
				this.advertisementShow = true
				uni.setStorageSync('advertising', JSON.stringify(this.typeList));
			},
			//获取当前日期
			getDates(){
				var now = new Date();
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				var date = now.getDate();
				this.date = year + '-' + month + '-' + date
			},
			// 立即跳过 
			skipNow() {
				this.advertisementShow = false
			},
			//播放视频
			onplay(){
				this.viautoPlay = true
				this.record()
			},
			// 视频播放完触发 
			endPlay() {
				this.advertisementShow = false
			},
			
			// 营销广告 
			async getScreen() {
				let params = {
					method: 'api/v2/promo/promo_list',
					path: this.getRoute,
				}
				let res = await this.$http(params);
				if (res.data.length) {
					this.detailInfo = res.data[0]
				    this.endTime = Number(res.data[0].auto_time)
					if(!!this.endTime){
						this.setClose()
						if (!this.hasLogin) {
							this.advertisementShow = true
						} else {
							if(this.detailInfo.frequency == 1 ){
								this.advertisementShow = true
							}else{
								this.getSync()
							}
						}
					}else{
						this.advertisementShow = false
					}
				}
			},
			//关闭倒计时
			setClose(){
				let timer = setInterval(() => {
				    this.endTime -= 1; 
				    if (this.endTime <= 0) {
					  this.advertisementShow = false
				      clearInterval(timer); 
				    }
				  }, 1000);
			},
			// 统计点击次数 
			async record() {
				let params = {
					method: 'api/v2/promo/frequency_record',
					promo_id: this.detailInfo.id,
				}
				let res = await this.$http(params);
			},

			// 关闭广告 
			close() {
				this.advertisementShow = false
			},
			
			// 领取优惠卷 
			async receiveMarketing() {
				if (!this.hasLogin) {
					toPath('', this, true)
				} else {
					let params = {
						method: 'api/v2/promo/coupon_receive',
						promo_id: this.detailInfo.id,
					}
					let res = await this.$http(params);
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					if (res.status) {
						this.record()
						this.advertisementShow = false
						setTimeout(() => {
							uni.navigateTo({
								url: `/subPackages/coupon/user`
							})
						}, 500)
					}
				}
			},

			// 跳转详情 
			gotoSkip(item) {
				this.isLogin()
				let {
					path,
					type_id,
					ad_type,
					is_nested,
					app_id
				} = item
				let url = ''
				if (!this.hasLogin) {
					toPath('', this, true)
				} else {
					this.record()
					if (ad_type == 1 || ad_type == 2) {
						url = path
					} else if (ad_type == 3) {
						adsPath(3, '', '', path, '');
					} else {
						adsPath(4, '', '', `${path}${'||'}${appId}`, '');
					}
					uni.navigateTo({
						url: url
					})
					this.advertisementShow = false
				}

			}
		},

	}
</script>

<style lang="scss" scoped>
	.advertisement {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1112;
		background-color: rgba(0, 0, 0, .4);

		.swiper {
			width: 600rpx;
			height: 948rpx;
			margin-left: 50%;
			margin-top: 50%;
			transform: translate(-50%, -10%);
			border-radius: 32rpx;
			overflow: hidden;
			position: relative;
		}

		.img {
			width: 600rpx;
			height: 948rpx;
		}

		.button {
			position: absolute;
			bottom: 40rpx;
			right: 20rpx;
			height: 45rpx;
			border-radius: 45rpx;
			color: #FFFFFF;
			background-color: #E1E1E1;
			line-height: 45rpx;
			padding: 0 20rpx;
			z-index: 999;
			font-size: 24rpx;
		}

		.swiper-video {
			width: 100%;
			height: 100vh;
			position: relative;

			.video {
				width: 100%;
				height: 100vh;
			}
		}
	}

	.marketing-content {
		width: 600rpx;
		height: 956rpx;
		position: relative;
		animation: fadeIn 1s forwards;
		background-size: 100% 100%;
		border-radius: 30rpx;
		overflow: hidden;
		margin: 35% auto 0;

	}

	.marketin-bottom {
		width: 600rpx;
		height: 138rpx;

		position: absolute;
		z-index: 99;
		bottom: 0;

		.button-receive {
			width: 392rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			background: linear-gradient(180deg, #FEFBE9 0%, #FAE3AB 100%);
			border-radius: 480rpx;
			margin: 42rpx auto 0;

			.text {
				font-size: 32rpx;
				font-weight: 900;
				background: linear-gradient(180deg, #FF3700 0%, #B50000 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}

	.marketing-list {
		width: 548rpx;
		max-height: 520rpx;
		overflow-y: scroll;
		position: absolute;
		bottom: 120rpx;
		left: 26rpx;
	}

	.roll-up-content {
		width: 548rpx;
		height: 160rpx;
		background: url('https://static.member.stourweb.cn/uniapp/static/images/roll-up-background-img.png') center no-repeat;
		background-size: 100% 100%;
		margin: 0 auto 20rpx;
		display: flex;
		white-space: nowrap;
		position: relative;
	}

	.roll-up-left {
		width: 176rpx;
		height: 138rpx;
		color: #E80100;
	}

	.roll-up-right {
		width: 372rpx;
		height: 138rpx;
	}

	.money {
		font-size: 28rpx;
		font-weight: 500;
		text-align: center;
		margin-top: 28rpx;
	}

	.number {
		font-size: 56rpx;
		font-weight: bold;
	}

	.use-type {
		font-size: 24rpx;
		text-align: center;
		margin-top: 4rpx;
		width: 160rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		white-space: normal;
		overflow: hidden;
	}

	.roll-up-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		margin: 38rpx 36rpx 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		white-space: normal;
		overflow: hidden;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.ageing {
		font-size: 24rpx;
		color: #999999;
		margin-left: 36rpx;
		position: absolute;
		bottom: 24rpx;
	}

	.close-icon {
		margin-left: 24rpx;
		position: relative;
		margin-right: 4rpx;
		z-index: 99;
	}
    .close-icon-all {
		margin-left: 24rpx;
		margin-right: 4rpx;
		position: relative;
		z-index: 99;
    }
	.iconfont {
		font-size: 50rpx;
		color: #FFFFFF;
	}
	.close-but{
		position: relative;
		height: 45rpx;
		border-radius: 45rpx;
		color: #FFFFFF;
		background: rgba(0,0,0,0.6);
		line-height: 45rpx;
		padding: 0 20rpx;
		z-index: 999;
		font-size: 24rpx;
		margin-top: 2rpx;
	}
	.close-but-all{
		position: relative;
		height: 45rpx;
		border-radius: 45rpx;
		color: #FFFFFF;
		background: rgba(0,0,0,0.6);
		line-height: 45rpx;
		padding: 0 20rpx;
		z-index: 999;
		font-size: 24rpx;
		margin-top: 2rpx;
	}
	.close-button{
		position: absolute;
		right: 0rpx;
		top: 20rpx;
		display: flex;
		align-items: center;
		z-index: 999;
	}
</style>